<template>
  <div class="user">
      <div class="theme-one text-center">欢迎来到中国农业银行重庆市分行京东购</div>
      <div class="header">
        <div class="user-name text-center">
          <span>1508455644</span>
        </div>
      </div>

      <div class="nav">
        <nav-tab>
          <tab-item info="" @click.native="selectNav(1)" :class="{'active-icon':activeIcon==1}">
            <span>待付款</span>
            <template slot="icon">
                <span class="iconfont iconfont-daifukuan" ></span>
            </template>
          </tab-item>

          <tab-item info="" @click.native="selectNav(2)" :class="{'active-icon':activeIcon==2}">
            <span>待收货</span>
            <template slot="icon">
                <span class="iconfont iconfont-daishouhuo" ></span>
            </template>
          </tab-item>

          <tab-item info="" @click.native="selectNav(3)" :class="{'active-icon':activeIcon==3}">
            <span>已完成</span>
            <template slot="icon">
                <span class="iconfont iconfont-yiwanchengdingdan"></span>
            </template>
          </tab-item>        
        </nav-tab>
      </div>

      <div class="list-cell">
        <van-cell-group>
          <van-cell title="我的订单" is-link />
        </van-cell-group>
      </div>
      
      <div  class="logo-fixed">
          <div  class="logo-img text-center">
            <img src="./../../../static/lib/img/user-logo.png">
          </div>  
      </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import navTab from './tpl/nav-tab'
import tabItem from './tpl/tab-item'

export default {
  name: 'userPage',
  created (){

  },
  data () {
    return {
        activeIcon:0,
    }
  },
  methods:{
    selectNav (val){
      let vm=this;
      vm.activeIcon=val;
      setTimeout(()=>{
        vm.activeIcon=0;
      },200);
    }
  },
  components:{
    navTab,
    tabItem
  }
}
</script>


<style scoped lang="scss">
.user{
    height:100%;
    background:#fff;
    .theme-one{
        position:fixed;
        top:0;
        width:100%;
        background:rgba(102,102,102,.4);
        color:#efefef;
        padding:.133333rem;
    }
    .header{
        height:3.6rem;
        padding:.8rem .266667rem 0 .266667rem;
        background:rgba(241,2,21,.9);
        border-bottom-left-radius: 30%;
        border-bottom-right-radius: 30%;
        .user-name{
          color:#fff;
          margin-top:1.333333rem;
          span{
            font-size:.48rem;
          }
        }
    }
    .nav{
      padding:.24rem 0;
      .iconfont{
        color:#520000;
        font-size:.6rem;
      }
      .active-icon{
        color:#e4393c;
        .iconfont{
          color:#e4393c;
          font-size:.66rem;
        }
      }
    }
    .list-cell{

    }
    .logo-fixed{
      width:100%;
      position:fixed;
      bottom:2rem;
      .logo-img{
        height:1.066667rem;
        img{
          height:100%;
        }
      }

    }
}
    
</style>
